<template>
  <view class="viewport">
    <!-- 导航栏 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
      <view class="title">个人信息</view>
    </view>
    <!-- 头像 -->
    <view class="avatar">
      <view class="avatar-content">
        <image @tap="onAvaterChange" class="image" :src="userInfo.avatarUrl" mode="aspectFill" />
        <text class="text">点击修改头像</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="form">
      <!-- 表单内容 -->
      <view class="form-content">
        <view class="form-item">
          <text class="label">账号</text>
          <text class="account">{{ userInfo.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input class="input" type="text" placeholder="请填写昵称" v-model="userInfo.userName" />
        </view>
        <view class="form-item">
          <text class="label">身份</text>
          <view>{{ userInfo.roleName }}</view>
        </view>
        <view class="form-item">
          <text class="label">身份描述</text>
          <view>{{ userInfo.roleDescription }}</view>
        </view>
        <view class="form-item">
          <text class="label">账号状况</text>
          <view>{{ userInfo.enabled === 1 ? '可用' : '不可用' }}</view>
        </view>
        <view class="form-item">
          <view>本月已连续签到 {{ signNumber }} 次</view>
        </view>
      </view>
      <!-- 提交按钮 -->
      <button class="form-button" @click="debounce_update()">保 存</button>
      <button class="form-button" @click="debounce_sign()">签到</button>
      <button class="form-button" @click="openFeedbackPopUp">用户反馈</button>
      <button class="form-button" @click="onManageVideo()">管理我的科普课堂</button>
      <button class="form-button" @click="onManageForum()">管理我发布的帖子</button>
      <button class="form-button" style="background-color: #9e1313" @click="logOut()">
        退出登录
      </button>
      <uv-toast ref="toastRef" position="top"></uv-toast>
      <!-- 用户反馈弹出层 -->
      <uv-popup ref="popup" mode="bottom" round="20">
        <uv-toast ref="popupToastRef" position="top"></uv-toast>
        <view style="width: 100%">
          <view>
            <uni-card :is-shadow="false" is-full>
              <text class="uni-h6">
                如果你对本微信小程序有什么意见，请在下方输入您的意见，我们将认真采纳，感谢！
              </text>
            </uni-card>
            <uv-textarea
              v-model="feedback.content"
              count
              maxlength="200"
              placeholder="请输入内容"
            ></uv-textarea>
            <button class="button" @click="debounce_SubmitFeedback()">提交反馈</button>
          </view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  getUserProfileAPI,
  updateUserProfileAPI,
  submitFeedBackAPI,
  getSignNumberAPI,
  signAPI,
} from '@/services/mine'
import { useUserStore } from '@/stores'
import { debounce } from '@/utils/debounce'

//签到次数
const signNumber = ref(0)

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const toastRef = ref()

const update = async function () {
  await updateUserProfileAPI(userInfo.value.userName)
  toastRef.value.show({
    type: 'success',
    message: '保存成功',
    complete() {
      uni.navigateBack({ delta: 1 }) //返回上个页面
    },
  })
}
const debounce_update = debounce(update, 500)
const userInfo = ref({
  id: '',
  avatarUrl: '',
  account: '',
  userName: '',
  roleName: '',
  roleDescription: '',
  enabled: '',
})

const getUserProfileData = async () => {
  const res = await getUserProfileAPI()
  signNumber.value = (await getSignNumberAPI()).data
  userInfo.value = res.data
}

//签到
const sign = async () => {
  const res = await signAPI()
  toastRef.value.show({
    type: 'primary',
    message: res.data,
  })
}
const debounce_sign = debounce(sign, 500)
onLoad(() => {
  getUserProfileData()
})
const userStore = useUserStore()
const onAvaterChange = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      const { tempFilePath } = res.tempFiles[0]
      uni.uploadFile({
        url: '/auth/avatar',
        name: 'img',
        filePath: tempFilePath,
        success: (res) => {
          if (res.statusCode === 200) {
            const data = JSON.parse(res.data)
            if (data.code === 200) {
              toastRef.value.show({
                type: 'success',
                message: '修改成功',
              })
              userStore.getUser() //重新获取用户信息
              getUserProfileData()
            }
          } else {
            toastRef.value.show({
              type: 'error',
              message: '修改失败',
            })
          }
        },
      })
    },
  })
}

const popup = ref()
const openFeedbackPopUp = () => {
  popup.value.open()
}
const onManageVideo = () => {
  uni.navigateTo({ url: `/pages/learn/manage` })
}
const onManageForum = () => {
  uni.navigateTo({ url: `/pages/forum/manage` })
}
const feedback = ref({
  content: '',
})
const popupToastRef = ref()

const submitFeedback = async () => {
  // 在此处添加将反馈内容上传到后端的逻辑
  // 上传成功后可以添加相应的提示或跳转逻辑
  await submitFeedBackAPI(feedback.value)

  popupToastRef.value.show({
    type: 'success',
    message: '提交成功',
    complete() {
      feedback.value.content = ''
      popup.value.close()
    },
  })
}
const debounce_SubmitFeedback = debounce(submitFeedback, 500)
//退出登录
const logOut = () => {
  userStore.logOut()
  toastRef.value.show({
    type: 'success',
    message: '退出登录成功',
    complete() {
      uni.navigateBack({ delta: 1 }) //返回上个页面
    },
  })
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/background1.png);
  // background-size: auto 420rpx;
  background-repeat: no-repeat;
}

// 导航栏
.navbar {
  position: relative;

  .title {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .back {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 头像
.avatar {
  text-align: center;
  width: 100%;
  height: 260rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}

// 表单
.form {
  background-color: #f4f4f4;

  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 46rpx;
    // line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
      height: 46rpx;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}

// 反馈
.easyinput {
  margin: 10px;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
